<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>

<div class="easyui-layout" data-options="fit:true">
	<div data-options="region:'center',border:false">
		<input type="file" id="file" name="myfile" onclick="clearProgressInfo()"/>  
		<span id="progressInfo" style="display:none;">  
		<progress id="progressBar" value="0" max="100"></progress>  
		<span id="percentage"></span>  
		</span><br/>  
		<input type="button" onclick="UpladFile()" value="上传" /> 
		<input type="button" onclick="UpladStop()" value="结束" />  
		<br>
		<br>
		
		<input type="text" id="progress_percent">
		<input type="text" id="progress_bar">
		<input type="text" id="has_upload">
		<input type="text" id="upload_speed">
		
		
	</div>
    
<script type="text/javascript">

var xhr;
var ot;//
var oloaded;
//上传文件方法
function UpladFile() {
    var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
    var url = "/file/upload"; // 接收上传文件的后台地址 
    
    var form = new FormData(); // FormData 对象
    form.append("file", fileObj); // 文件对象
    
    xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
    xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
    xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
    /* xhr.onload = uploadComplete; //请求完成
    xhr.onerror =  uploadFailed; //请求失败
    xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
    xhr.upload.onloadstart = function(){//上传开始执行方法
        ot = new Date().getTime();   //设置上传开始时间
        oloaded = 0;//设置上传开始时，以上传的文件大小为0
    }; */
    xhr.send(form); //开始上传，发送form数据
}



function clearProgressInfo()
{
	document.getElementById('progressInfo').style.display='none';
	document.getElementById("progressBar").value = 0;
	document.getElementById("percentage").innerHTML = "";
}

function progressFunction(evt) {
/* 	
	var progressBar = document.getElementById("progressBar");
	var percentageDiv = document.getElementById("percentage");
	if (evt.lengthComputable) {
		progressBar.max = evt.total;
		progressBar.value = evt.loaded;
		percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
	}
 */	
	shouProgres();
}

var oTimer = null;
function shouProgres() {
	oTimer = setInterval("getProgress()", 1000);
}

function getProgress() {
	var now = new Date();
    $.ajax({
        type: "post",
        dataType: "json",
        url: "/progress/upfile/progress",
        data: now.getTime(),
        success: function(data) {
        	$("#progress_percent").text(data.percent);
            $("#progress_bar").text(data.percent);
            $("#has_upload").text(data.mbRead);
            $("#upload_speed").text(data.speed);
        },
        error: function(err) {
        	$("#progress_percent").text("Error");
        }
    });
}

function UpladStop(){
	window.clearInterval(oTimer);
}

</script>	
</div>
